<template>
  <!--  导出文件对话框  -->
  <el-dialog
      :title="title || '导出'"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleCloseExportDialog">

    <el-form :inline="true"  class="demo-form-inline" size="small">
      <el-form-item label="文件名">
        <el-input v-model="fileName" placeholder="输入导出文件名称"></el-input>
      </el-form-item>
      <el-form-item label="导出类型">
        <el-select v-model="fileType" placeholder="请选择导出类型">
          <el-option label="xls" value="xls"></el-option>
          <el-option label="xlsb" value="xlsb"></el-option>
          <el-option label="xlsx" value="xlsx"></el-option>
          <el-option label="csv" value="csv"></el-option>
          <!--          <el-option label="pdf" value="pdf"></el-option>-->
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseExportDialog">取 消</el-button>
        <el-button type="primary" @click="onExport && handleCloseExportDialog">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script >

import { exportCsv, exportXLsx, exportPdf ,importXlsx} from '@/utils/importExport'
export  default {
  name :"FileExport",
  props:{
    datas:{
      type:Array,
      default() {
        return [];
      }
    },
    title:String
  },
  data(){
    return {
      dialogVisible:false,
      fileName:'',
      fileType:'xlsx'
    }
  },
  mounted() {
  },
  methods:{
    handleCloseExportDialog(){
      this.dialogVisible = false;
    },

    // 导出点击
    onExport() {
      this.exportLoading = true;
      if (this.fileType=== 'csv') {
        // 标题头格式
        let header = [{ date: '日期' }, { name: '姓名' }, { address: '地址' }, { goodsName: '商品名称' }, { desc: '描述' }];
        // 文件名称
        let fileName = this.fileName === '' ? 'exportCsv' : this.fileName;
        // 调用导出方法
        exportCsv(this.datas, header, fileName);
      } else if (this.fileType=== 'xls' || this.fileType=== 'xlsb' || this.fileType=== 'xlsx') {
        // 标题头格式
        let header = [{ date: '日期' }, { name: '姓名' }, { address: '地址' }, { goodsName: '商品名称' }, { desc: '描述' }];
        // 文件名称
        let fileName = this.fileName === '' ? 'vue-admin-wonderful' : this.fileName;
        exportXLsx(this.datas, header, this.fileType, fileName);
      } else if (this.fileType=== 'pdf') {
        // 文件名称
        let fileName = this.fileName === '' ? 'vue-admin-wonderful' : this.fileName;
        exportPdf(document.querySelector('#tablesRef'), fileName);
      }
      setTimeout(() => {
        this.exportLoading = false;
      }, 500)
    },
  }
}

</script>



<style scoped >

</style>